<template>
  <div class="answersWorkOrderList">

    <div class="workListTitle" v-if="answersData.data.toDoTaskList.data.taskObjects">
      <div class="workListCls">
        <h4 style="font-size: 1.2em">
          <em class="iconfont icon-yuandian" style="color: #DA200D"/>
          <span>我的待办</span>
        </h4>
      </div>
    </div>

    <div class="workListTable" v-for="workOrder in answersData.data.toDoTaskList.data.taskObjects" :key="workOrder.tiid"
         @click="goToWorkOrderPage(workOrder)">
      <table class="listTable">
        <caption>工单信息</caption>
        <tr>
          <th scope="col" colspan="1"></th>
          <th scope="col" colspan="1"></th>
        </tr>

        <tr>
          <td colspan="2" style="font-weight: bold">{{ workOrder.applyTitle }}</td>
        </tr>

        <tr>
          <td colspan="2">拟稿人：{{ workOrder.applicant.userName }}</td>
        </tr>
        <tr>
          <td colspan="2" >拟稿时间：{{ workOrder.createTime | formatDate}}</td>
        </tr>

        <tr>
          <td colspan="2">当前办理人：{{ workOrder.handler.userName }}</td>

        </tr>
        <tr>
          <td colspan="2">状态：{{workOrder.statusName || '拟稿'}}</td>
        </tr>

      </table>
    </div>

    <div class="workListTitle" v-if="answersData.data.doneTaskList.data.list">
      <div class="workListCls">
        <h4 style="font-size: 1.2em">
          <em class="iconfont icon-yuandian" style="color: #DA200D"/>
          <span>我的已办</span>
        </h4>
      </div>
    </div>

    <div class="workListTable" v-for="workOrderProcess in answersData.data.doneTaskList.data.list"
         :key="workOrderProcess.tiid" @click="goToWorkOrderPage(workOrderProcess)">
      <table class="listTable">
        <caption>我的已办</caption>
        <tr>
          <th scope="col" colspan="1"></th>
          <th scope="col" colspan="1"></th>
        </tr>

        <tr>
          <td colspan="2" style="font-weight: bold">{{ workOrderProcess.title || workOrderProcess.mainTaskName }}</td>
        </tr>

        <tr>
          <td colspan="2">拟稿人：{{ workOrderProcess.creatorName }}</td>
        </tr>
        <tr>
          <td colspan="2">拟稿时间：{{ workOrderProcess.createTime }}</td>
        </tr>

        <tr>
          <td colspan="2">当前办理人：{{ workOrderProcess.handlerName | ellipsis }}</td>

        </tr>
        <tr>
          <td colspan="2">状态：{{ workOrderProcess.statusName || '拟稿' }}</td>
        </tr>

      </table>
    </div>

    <div class="workListTitle" v-if="answersData.data.myApplicantTaskList.data.list">
      <div class="workListCls">
        <h4 style="font-size: 1.2em">
          <em class="iconfont icon-yuandian" style="color: #DA200D"/>
          <span>我的工单</span>
        </h4>
      </div>
    </div>

    <div class="workListTable" v-for="workOrderProcess in answersData.data.myApplicantTaskList.data.list"
         :key="workOrderProcess.tiid" @click="goToWorkOrderPage(workOrderProcess)">
      <table class="listTable">
        <caption>我的工单信息</caption>
        <tr>
          <th scope="col" colspan="1"></th>
          <th scope="col" colspan="1"></th>
        </tr>

        <tr>
          <td colspan="2" style="font-weight: bold">{{ workOrderProcess.title || workOrderProcess.mainTaskName }}</td>
        </tr>

        <tr>
          <td colspan="2">拟稿人：{{ workOrderProcess.creatorName }}</td>
        </tr>
        <tr>
          <td colspan="2">拟稿时间：{{ workOrderProcess.createTime }}</td>
        </tr>

        <tr>
          <td colspan="2">当前办理人：{{ workOrderProcess.handlerName | ellipsis }}</td>

        </tr>
        <tr>
          <td colspan="2">状态：{{ workOrderProcess.statusName || '拟稿' }}</td>
        </tr>

      </table>
    </div>


  </div>
</template>

<script>
import {setQueryTaskListRefresh} from "@/utils/setChatStoreData";
import router from "@/router";
import API from "@/api/api-chat-list";
import util from "@/common/util";
import slidingScrollBar from "@/utils/slidingScrollBar";

const STATUS_NAME = {
  "DRAFT" :"拟稿",
  "DEPT_ADMIN_APPROVE" : "部门管理员审批",
  "CREATE_SUB_FLOW" : "分任务子流程",
  "RESPONDER_APPROVE" : "责任人审批",
  "SUB_ORG_USER_HANDLE" : "子流程-组织人员办理",
  "SUB_CREATE_SUB_FLOW" : "子流程-分任务办理子流程",
  "SUB_ORG_USER_CONFIRM" : "子流程-组织人员确认",
  "SUB_CREATOR_CONFIRM" : "子流程-拟稿人确认",
  "END" : "处理完成"
}
const CHAPTER_STATUS_NAME_MAP = {
  "DRAFT" :"拟稿",
  "ZBSJ" : "书记",
  "ZSDWJBR" : "直属党委经办人",
  "ZSDWFZR" : "直属党委负责人",
  "END" : "处理完成"
}
const NODE_NAME = {
  "draft" :"拟稿",
  "deptAdminApprove" : "部门管理员审批",
  "createSubFlow" : "分任务子流程",
  "responderApprove" : "责任人审批",
  "orgUserHandle" : "子流程-组织人员办理",
  "subCreateSubFlow" : "子流程-分任务办理子流程",
  "orgUserConfirm" : "子流程-组织人员确认",
  "creatorConfirm" : "子流程-拟稿人确认",
  "_EOF" : "处理完成"
}
const CHAPTER_NODE_NAME_MAP = {
  "draft" :"拟稿",
  "zbsj" : "书记",
  "zsdwjbr" : "直属党委经办人",
  "zsdwfzr" : "直属党委负责人",
  "_EOF" : "处理完成"
}
export default {
  name: "AnswersWorkOrderSearchList",
  props: ['robotInfo', 'answersData'],
  methods: {
    refreshWorkOrderList(workOrderName, workOrderType) {
      setQueryTaskListRefresh(this, workOrderName, workOrderType);
    },
    async goToWorkOrderPage(workOrder) {
      const paramApplyId = {
        "id": workOrder.id,
      }
      if (workOrder.businessProcess != null) {
        paramApplyId.id = workOrder.applyId.replace(workOrder.businessProcess + "-", "");
      }
      //获取工单信息
      const workApplyData = await API.findWorkApplyById(paramApplyId);
      workApplyData.tiid = workOrder.tiid;
      this.$store.commit('setWorkApplyData', workApplyData);

      const dom = document.getElementById('home_con');
      this.$store.commit('setRhScrollTop',dom.scrollTop);
      await router.push('/workOrder');
    }
  },
  activated() {
    this.$nextTick(() => {
      slidingScrollBar( this.$store.state.rhScrollTop['ZB'], 'instant');
    })
  },
  filters: {
    formatDate(val) {
      if (val) {
        return util.formatDate.format(new Date(val), 'yyyy-MM-dd hh:mm:ss');
      }
      return '--';
    },
    statusName(task) {
      if("chapterApply" == task.templateId || "chapterApply" == task.flowType) {
        if (task.status) {
          return CHAPTER_STATUS_NAME_MAP[task.status]
        } else if (task.nodeId) {
          return CHAPTER_NODE_NAME_MAP[task.nodeId]
        } else {
          //从我的工单点进来没有显示环节 待解决
          // const status = vueInstance.getStatusById(task.applyId);
          // return CHAPTER_STATUS_NAME_MAP[status];
        }
      }
      if (task.status) {
        return STATUS_NAME[task.status]
      } else if (task.nodeId) {
        return NODE_NAME[task.nodeId]
      }
      return '';
    },
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 3) {
        return value.slice(0, 3) + "...";
      }
      return value;
    }
  }
}
</script>

<style type="text/css">

.answersWorkOrderList .red-span {
  color: #ed2439 !important;
  position: absolute;
}

.workListTitle {
  display: flex;

}

.workListCls {
  padding-top: 0.6em;
  width: 80%;
}

.workListButton {
  width: 20%;
}

.workListTable {
  border-collapse: collapse;
  width: 90%;
  table-layout: fixed;
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 0.2em 0.8em;
  margin-top: 1em;
}

.listTable {
  border-width: 0;
  line-height: 1.5em;
}

.listTable caption {
  display: none;
}

.col-td2 {
  text-align: right;
}

.workListButton button {
  float: right;
  background: #ed4324;
  border-radius: 4px;
  color: #fff;
  border: none;
  font-style: normal;
  height: 30px;
  width: 70px;
}

</style>


